<!--  -->
<template>
  <div class="mytodos">
    <!-- 标题开始 -->
    <div class="mytodos-header">
      <h1>T O D O S</h1>
    </div>
    <!-- 标题结束 -->
    <!-- 内容开始 -->
    <div class="mytodos-content">
      <!-- 顶部开始 -->
      <div class="mytodos-content-top">
        <div :class="['content-top-left',{'allchecked':allChecked}] " @click="handleAllCheckTodo" >
          ￥
        </div>
        <div class="content-top-right">
          <input type="text" v-model="newTodoVal" @keyup.enter="saveNewTodo"/>
        </div>
      </div>
      <!-- 顶部结束 -->
      <!-- 中间列表开始 -->
      <div class="mytodos-content-mid">
        <div class="content-mid-list">
          <div class="mid-list-item"  v-for="(item,index) in filterTodos" :key="item.id">
            <div class="list-item-left">
              <input type="checkbox" v-model="item.status" />
              
            </div>
            <div :class="['list-item-mid',{'completed':item.status}]" @dblclick.stop="updataTodoVal = index" >
              <span :class="['title',{'hidden':updataTodoVal === index}]" >{{item.text}}</span>
              <input type="text"
                :class="{'hidden':updataTodoVal !== index}"
                 v-model="item.text"
                  @blur="updataTodoVal = -1"  
                 @keyup.enter="updataTodoVal = -1"
                 />
            </div>
            <div class="list-item-right" @click.stop="handleDeleteTodo(index)">X</div>
          </div>
        </div>
      </div>
      <!-- 中间列表结束 -->
      <!-- 底部功能栏开始 -->
      <div class="mytodos-content-bottom">
        <div class="content-bottom-left">{{activeTodosCount}} 项剩下</div>
        <div class="content-bottom-mid">
          <div :class="['mid-left',{'active':$store.state.active==='all'}]" @click.stop="newActive('all')">全部</div>
          <div :class="['mid-mid',{'active':$store.state.active==='active'}]" @click.stop="newActive('active')">待完成</div>
          <div :class="['mid-right',{'active':$store.state.active==='completed'}]" @click.stop="newActive('completed')">已完成</div>
        </div>
        <div class="content-bottom-right" @click.stop="clearCompletedTodos">清除已完成</div>
      </div>
      <!-- 底部功能栏结束 -->
    </div>
    <!-- 内容结束 -->
  </div>
</template>

<script>
import {mapState,mapGetters} from "vuex"
export default {
  
  data(){
    return{
      
      newTodoVal:"",
      updataTodoVal:-1,
      // todosList:JSON.parse(localStorage.getItem('todosList')||'[]')
        
    }
  },
  methods:{
    newActive(val){
      this.$store.commit("newActive",val)
    },
    saveNewTodo(){
      // this.todosList.push({
      //   id:  Date.now(),
      //   text:this.newTodoVal,
      //   status:false

      // })
      if(!!this.newTodoVal){
        this.$store.commit("saveNewTodo",this.newTodoVal)
        this.newTodoVal=""
      }else{
        this.$message({
          message: "输入不能为空！",
          type: "warning",})
      }
      
    },
    handleAllCheckTodo(){ //点击全选 
      let newtodo =  JSON.parse(JSON.stringify(this.todosList))
      if(!this.allChecked){
        newtodo.map(val=>val.status=true)
      }else{
        newtodo.map(val=>val.status=false)
      }
      this.$store.commit("handleAllCheckTodo",newtodo) 
    },
    handleDeleteTodo(index){
      this.$store.commit('handleDeleteTodo',index)
    },
    clearCompletedTodos(){
      let todos= this.todosList.filter(val=>{
          if(!val.status ){
            return true
          }
          })
          this.$store.commit("updataTodo",todos)
         
    }
  },
  computed: {
    ...mapState(['todosList']),
    ...mapGetters(['filterTodos']),
    allChecked(){
      let checked =true;
      if(this.todosList.length >=1){
        this.todosList.map(v=>{
          if(!v.status)checked = false;
        })
        return checked
      }

    },

    activeTodosCount(){
      let activeList = this.todosList.filter(val=>{
        if(!val.status){
          return true
        }
      })
    return activeList.length
    }
  },
  watch:{
    todosList:{
      handler:function(todos){
        localStorage.setItem("vuex",JSON.stringify(todos))
        
      },
      deep:true 
    }
  }
  }
</script>
<style lang='less' scoped>
/* css reset */
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select,figure,figcaption{
    padding: 0;
    margin: 0;
}
html{
    font-size: 16px;
}
body{
    font: 14px "Microsoft YaHei","Arial";
}
h1,h2,h3,h4,h5,h6,b,strong{
    font-weight: normal;
    font-size: 100%;
}
em,i{
    font-style: normal;
}
ul,ol{
    list-style: none;
}
a{
    text-decoration: none;
    color: #444444;
}
input,textarea{
    outline: none ;
    border: none;
}
img{
    border: none;
    vertical-align: middle;
}
button{
  background: none;
  border:none;
  outline: none;
  cursor: pointer;
}
.clearfix{
    *zoom: 1;
}
.clearfix::after{
    content: " ";
    display: block;
    clear: both;
    visibility: hidden;
    overflow: hidden;
    height: 0;
}
.hidden {
  display: none;
}
.show {
  display: block;
}
.mytodos {
  width: 50vw;
  margin: 0 auto;
  .mytodos-header {
    h1 {
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 40px;
      color: rgba(126, 171, 100, 0.7);
      
    }
  }

  .mytodos-content {
    border: 1px solid #ddd;
    border-radius: 10px;
    .mytodos-content-top {
      padding: 0 1px;
      
      height: 30px;
      display: flex;
      border-bottom:1px solid #ccc;
      .content-top-left {
        height: 30px;
        flex: 1;
        text-align: center;
        line-height: 30px;
        font-size: 24px;
        cursor: pointer;
        // transform: rotate(90deg);
      }
      .allchecked {
        color: red;
      }

      .content-top-right {
        height: 30px;
        flex: 8;
        input {
          box-sizing: border-box;
          height: 100%;
          width: 100%;
          border:1px solid #eee;
          border-radius: 5px;
          padding: 0 10px;
        }
      }
    }
    .mytodos-content-mid {
      .content-mid-list {
        .mid-list-item {
          height: 50px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #ddd;
          margin-bottom: 5px;
          .list-item-left {
            display: flex;
            justify-content: center;
            flex: 1;
            input {
            }
          }

          .list-item-mid {
            height: 50px;
            flex: 8;
            line-height: 50px;
            font-size: 24px;
            .title {
              
              
            }input{
            box-sizing: border-box;
          height: 100%;
          width: 100%;
          border:1px solid #eee;
          border-radius: 5px;
          padding: 0 10px;
          font-size: 24px;
            }
          }
          .completed {
            color: #ddd;
            text-decoration: line-through;
          }

          .list-item-right {
            visibility: hidden;
            display: flex;
            justify-content: center;
            flex: 1;
          }
        }
        .mid-list-item:hover {
          .list-item-right {
            visibility: visible;
            cursor: pointer;
            display: flex;
            justify-content: center;
            flex: 1;
          }
        }
      }
    }
    .mytodos-content-bottom {
      padding: 0 10px;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .content-bottom-left {
      }

      .content-bottom-mid {
        display: flex;
        .active{
          border: 1px solid pink;
          background: bisque;
          border-radius: 5px;
        }
        .mid-left {
          margin:0 10px;
          cursor: pointer;
        }

        .mid-mid {
          margin:0 10px;
          cursor: pointer;
        }

        .mid-right {
          margin:0 10px;
          cursor: pointer;
        }
      }

      .content-bottom-right {
        cursor: pointer;
      }
    }
  }
}
</style>